导航菜单 nav

您所在的位置:网站首页 app store二级菜单不显示 导航菜单 nav

导航菜单 nav

2024-06-29 10:32| 来源: 网络整理| 查看: 265

导航菜单

导航菜单包含水平导航和垂直导航, 在 2.x 版本中,nav 组件属于 element 模块的子集。

水平导航

一般用于页面头部菜单。样式规则如下:

通过 class="layui-nav" 设置导航容器 通过 class="layui-nav-item" 设置导航菜单项 追加 className 为 layui-this 可设置菜单选中项 通过 class="layui-nav-child" 设置导航子菜单项 追加 className 为 layui-nav-child-c 和 layui-nav-child-r 可设置子菜单居中和向右对齐 常规用法

备注:滑块效果仅跟随不存在子菜单的菜单项。

加入徽章等元素 导航主题

给导航容器追加任意背景色 class,内置背景色参考:#背景色公共类

垂直导航

一般用于左侧侧边菜单。样式规则如下:

在水平导航的 class 规则上,通过设置 class="layui-nav layui-nav-tree" 定义垂直导航容器。 通过 class="layui-nav-itemed" 设置父菜单项为展开状态 通过给导航容器追加 class="layui-nav-side" 可设置侧边垂直导航 其余结构及填充内容与水平导航完全相同 侧边垂直导航 API API 描述 var element = layui.element 获得 element 模块。 element.render('nav', 'filter') 导航菜单 nav 组件渲染。 渲染

element.render('nav', filter);

参数 'nav' 是渲染导航的固定值 参数 filter : 对应导航容器 lay-filter 的属性值

nav 组件会在元素加载完毕后,自动对导航完成一次渲染,因此该方法主要用于对动态插入的导航元素的初始化渲染。

layui.use(function(){ var element = layui.element; var $ = layui.$; // 动态插入导航元素 $('#test').html(` 选中 菜单 `); // 渲染导航组件 element.render('nav', 'demo-filter-nav'); }); 属性 属性 描述 lay-accordion 2.8.18+ 导航容器属性。用于开启垂直导航菜单展开时的手风琴效果。如:… lay-bar 导航容器属性。用于禁用滑块跟随功能。如:… lay-unselect 导航菜单项属性。 设置后,点击对应菜单项时,不会出现选中效果。 事件

element.on('nav(filter)', callback)

参数 nav(filter) 是一个特定结构。 nav 为导航事件固定值; filter 为导航容器属性 lay-filter 对应的值。 参数 callback 为事件执行时的回调函数,并返回一个 object 类型的参数。

当点击导航父级菜单和二级菜单时触发。示例:

面包屑导航

面包屑导航主要用于指示当前页面所处的位置,并能返回到上级页面。

面包屑导航渲染

element.render('breadcrumb', filter);

参数 'breadcrumb' 是渲染面包屑导航的固定值 参数 filter : 对应面包屑导航容器 lay-filter 的属性值

该方法主要用于对动态插入的面包屑导航的初始化渲染,用法同上述导航菜单。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3